/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn  } from '../../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../../../library/func';
import DoHttp from '../../../../project/func/http/http';
import { Swiper, SwiperItem } from '@tarojs/components';

// images
// import '../../../../assets/image/fans.jpg'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		this.state = {
			// tab index
			index: 0,

			// 永久粉丝
			fans_forever: [],

			// 临时粉丝
			fans_temp: []
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		// 获取粉丝列表
		DoHttp.get({
			url: 'vip/fansList.php',
			success: (data)=> {
				console.log('data',data);
				this.setState({
					fans_forever: data.fans_forever,
					fans_temp: data.fans_temp
				})
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			}
		});
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
    
	// onTabClick tab 点击
	onTabClick = (index, e)=> {
		this.setState({
			index: index
		})
	}

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '粉丝',
        navigationBarBackgroundColor: '#fff',
    }
	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent style='height:100vh;background-color:#f2f2f2;'>
				
					{/* tab 专属粉丝、临时粉丝 */}
					{
						this.state.index == 0 ? (
							<CAround bg='#fff' h='100' lh='100' mb='20'>
								<CHand
									color='#ba8f54'
									bb='4 solid #ba8f54'
									size='30'
									onClick={this.onTabClick.bind(this, 0)}
								>专属粉丝</CHand>
								<CHand
									color='#515151'
									size='30'
									pb='4'
									onClick={this.onTabClick.bind(this, 1)}
								>临时粉丝</CHand>
							</CAround>
						) : (
							<CAround bg='#fff' h='100' lh='100' mb='20'>
								<CHand
									color='#515151'
									size='30'
									pb='4'
									onClick={this.onTabClick.bind(this, 0)}
								>专属粉丝</CHand>
								<CHand
									color='#ba8f54'
									bb='4 solid #ba8f54'
									size='30'
									onClick={this.onTabClick.bind(this, 1)}
								>临时粉丝</CHand>
							</CAround>
						)
					}

					{/* 粉丝详情 */}
					<Image lazyLoad={true} mode='aspectFit' style='width:750rpx; height:200rpx' src='http://image.mod.hesq.com.cn/rushbuy/assets/20181113/fans.jpg' />

					<Swiper current={this.state.index} circular onChange={this.onSwiperChange}>
						<SwiperItem>
							{this.state.fans_forever.map(fans => {
								return(
									<CLine bb='2 solid #eee' mx='20' py='20' >
										<Navigator url="/screen/vip/vip/fans/detail?id={{fans.id}}" hover-class='none'>
											<CItemX y='center'>
												<CImage w='100' h='100' ra='50' src='{{fans.object.set_head}}'></CImage>
												{/* 文件原地址 src='http://image.cdn.hesq.com.cn/rushbuy/product/{{fans.object.set_head}}' */}
												<CHand size='24' ml='20'>{fans.object.set_nick}</CHand>
											</CItemX>
										</Navigator>
									</CLine>
								)
							})}
						</SwiperItem>
						<SwiperItem>
							{this.state.fans_temp.map(fans => {
								return(
									<CLine bb='2 solid #eee' mx='20' py='20'>
										<Navigator url="/screen/vip/vip/fans/detail?id={{fans.id}}" hover-class='none'>
											<CItemX y='center'>
												<CImage w='100' h='100' ra='50' src='{{fans.object.set_head}}'></CImage>
												<CHand size='24' ml='20'>2{fans.object.set_nick}</CHand>
											</CItemX>
										</Navigator>
									</CLine>
								)
							})}
						</SwiperItem>
					</Swiper>

				</CContent>
			</CPage>
		)
	}
}


